<template>
    <section class="real-app">
        <input 
            type="text"
            class="add-input"
            autofocus="autofocus"
            placeholder="接下来要做什么？"
            @keyup.enter="addTodo"
        >
        <Item 
            :todo="todo"
             v-for="todo in filteredTodos"
             :key="todo.id"
             @del="deleteTodo"
        ></Item>
        <Tabs :filter="filter" :todos="todos" @toggle="toggleFilter" @clearAll="clearAll"></Tabs>
    </section>
</template>
<script>
import Item from './item.vue'
import Tabs from './tabs.vue'
let id=0
export default {
    data() {
      return{
          todos:[],
          filter:'all'
      }
    },
    methods:{
        addTodo(e){
            if(e.target.value.trim()){
                this.todos.unshift({
                id:id++,
                content: e.target.value.trim(),
                completed:false
            })
            e.target.value=""
            }
        },
        deleteTodo(val){
            this.todos.splice(this.todos.findIndex(todo=>todo.id===val),1)
        },
        toggleFilter(state){
            this.filter=state
        },
        clearAll(){
            this.todos=this.todos.filter(todo=>!todo.completed)
        }
    },
     components:{
        Item:Item,
        Tabs:Tabs
    },
    computed:{
        filteredTodos(){
            if(this.filter ==='all'){
                return this.todos
            }
            const comple=this.filter==='completed'
            return this.todos.filter(todo=>comple===todo.completed)
            //选中completed就返回完成项组成的数组
            //选中active就返未完成项组成的数组
        }
    }
}
</script>
<style scoped>
    .real-app{
        width: 600px;
        margin: 0 auto;
        box-shadow: 0 0 5px #666;
    }
        .add-input{
            position: relative;
            width: 100%;   
            height: 60px;
            line-height: 60px;
            padding-left: 10px;
            font-size: 30px;
            background-color: #fff;
            outline: none;
            z-index: 1;
            box-sizing: border-box;
            border: none;
        }
</style>